---
title: LangChain LangServe
---

<Callout type="warning">
  This integration has not been tested with AI SDK v5.
</Callout>

## Overview

Integration with a LangServe server via Vercel AI SDK.

## Getting Started

import { Steps, Step } from "fumadocs-ui/components/steps";
import { InstallCommand } from "@/components/docs/install-command";

<Steps>
  <Step>
  ### Create a Next.JS project

```sh
npx create-next-app@latest my-app
cd my-app
```

  </Step>
  <Step>

### Install `@langchain/core`, AI SDK and `@assistant-ui/react`

<InstallCommand npm={["@assistant-ui/react", "@assistant-ui/react-ai-sdk", "ai", "@ai-sdk/react", "@langchain/core"]} />

  </Step>
  <Step>

### Setup a backend route under `/api/chat`

```tsx title="@/app/api/chat/route.ts"
import { RemoteRunnable } from "@langchain/core/runnables/remote";
import { toDataStreamResponse } from "@ai-sdk/langchain";

export const maxDuration = 30;

export async function POST(req: Request) {
  const { messages } = await req.json();

  // TODO replace with your own langserve URL
  const remoteChain = new RemoteRunnable({
    url: "<YOUR_LANGSERVE_URL>",
  });

  const stream = await remoteChain.stream({
    messages,
  });

  return toDataStreamResponse(stream);
}
```

  </Step>
  <Step>

### Define a `MyRuntimeProvider` component

```tsx twoslash include MyRuntimeProvider title="@/app/MyRuntimeProvider.tsx"
// @filename: /app/MyRuntimeProvider.tsx
// ---cut---
"use client";

import { useChat } from "@ai-sdk/react";
import { AssistantRuntimeProvider } from "@assistant-ui/react";
import { useChatRuntime } from "@assistant-ui/react-ai-sdk";

export function MyRuntimeProvider({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  const runtime = useChatRuntime();

  return (
    <AssistantRuntimeProvider runtime={runtime}>
      {children}
    </AssistantRuntimeProvider>
  );
}
```

  </Step>
  <Step>

### Wrap your app in `MyRuntimeProvider`

```tsx twoslash title="@/app/layout.tsx"
// @include: MyRuntimeProvider
// @filename: /app/layout.tsx
// ---cut---
import type { ReactNode } from "react";
import { MyRuntimeProvider } from "@/app/MyRuntimeProvider";

export default function RootLayout({
  children,
}: Readonly<{
  children: ReactNode;
}>) {
  return (
    <MyRuntimeProvider>
      <html lang="en">
        <body>{children}</body>
      </html>
    </MyRuntimeProvider>
  );
}
```

  </Step>
</Steps>
